import { GetServerSideProps } from 'next';
import { useTranslation } from 'react-i18next';
import { useRouter } from 'next/router';
import React from 'react';
import Layout from '../../src/components/layout/Layout';
import { RingErrorPageParams, RingErrorProps } from '../../src/model/rings';
import RoundedButton from '../../src/components/common/RoundedButton';

const RingError: React.FC<RingErrorProps> = ({ ring }) => {
  const router = useRouter();
  const { t } = useTranslation();
  return (
    <Layout title="Dialimpics | Error" mainClassName=" ringErrorPage">
      <div className="wrapper">
        <h2>{t('RING_ERROR_TITLE', { ring })}</h2>
        <h3>{t('RING_ERROR_SUBTITLE')}</h3>
        <RoundedButton
          title={t('RETURN_HOME')}
          size="small"
          onClick={(): void => {
            router.push('/');
          }}
        />
      </div>
    </Layout>
  );
};

export const getServerSideProps: GetServerSideProps<
  RingErrorProps,
  RingErrorPageParams
> = async (ctx) => {
  const { ring } = ctx.params;

  return {
    props: {
      ring,
    },
  };
};

export default RingError;